<template>
  <a-modal
    title="新增租户"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row>
          <a-col :span="12">
            <a-form-item label="租户名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-input
                placeholder="请输入租户名称"
                v-decorator="['name', { rules: [{ required: true, message: '请输入租户名称！' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="公司全称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-input
                placeholder="请输入公司全称"
                v-decorator="['companyName', { rules: [{ required: true, message: '请输入公司全称！' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
              <a-input
                placeholder="请输入联系人"
                v-decorator="['contactName', { rules: [{ required: true, message: '请输入联系人！' }] }]"
              />
            </a-form-item>


          </a-col>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系电话">
              <a-input
                placeholder="请输入联系电话"
                v-decorator.trim="['contactMobile', { rules: [{ required: true, message: '请输入联系电话！' }] }]"
              />
            </a-form-item>

          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="过期时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-date-picker
                placeholder="请选择过期时间"
                style="width: 100%"
                v-decorator="['expireTime', { rules: [{ required: true, message: '请选择过期时间！' }] }]"
              />
            </a-form-item>


          </a-col>
          <a-col :span="12">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="用户账号">
              <a-input
                placeholder="请输入租户账号"
                v-decorator.trim="['account', { rules: [{ required: true, message: '请输入租户账号！' }] }]"
              />
            </a-form-item>

          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input
                placeholder="请输入密码"
                v-decorator.trim="['password', { rules: [{ required: true, message: '请输入密码！' }] }]"
              />
            </a-form-item>

          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否入驻汇付">
          <el-switch v-model="infoData.isSettleIn" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
        </a-form-item>
          </a-col>
        </a-row>
        <div v-if="infoData.isSettleIn">
          <a-row>
            <a-col :span="12">
              <a-form-item label="企业用户名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input
                  placeholder="请输入企业用户名称"
                  v-decorator.trim="[
                    'enterpriseUserMsgVO.regName',
                    { rules: [{ required: true, message: '请输入企业用户名称！' }] }
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="营业执照编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input
                  placeholder="请输入营业执照编号"
                  v-decorator.trim="[
                    'enterpriseUserMsgVO.licenseCode',
                    { rules: [{ required: true, message: '请输入营业执照编号！' }] }
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="证照有效期类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select
                  ref="select"
                  placeholder="请选择证照有效期类型"
                  v-decorator.trim="[
                    'enterpriseUserMsgVO.licenseValidityType',
                    { rules: [{ required: true, message: '请选择证照有效期类型！' }] }
                  ]"
                  style="width: 100%"
                >
                  <a-select-option value="1">长期有效</a-select-option>
                  <a-select-option value="0">非长期有效</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="证照有效期起始日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-date-picker
                  placeholder="请选择证照有效期起始日期"
                  style="width: 100%"
                  v-decorator="[
                    'enterpriseUserMsgVO.licenseBeginDate',
                    { rules: [{ required: true, message: '证照有效期起始日期！' }] }
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="证照有效期结束日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-date-picker
                  placeholder="请选择证照有效期结束日期(非长期有效时必填)"
                  style="width: 100%"
                  v-decorator="[
                    'enterpriseUserMsgVO.licenseEndDate',
                    { rules: [{ required: false, message: '证照有效期结束日期！' }] }
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="注册地址(省)" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select
                  ref="select"
                  placeholder="请选择注册地址(省)"
                  v-decorator.trim="[
                    'enterpriseUserMsgVO.regProvId',
                    { rules: [{ required: true, message: '请选择注册地址(省)！' }] }
                  ]"
                  style="width: 100%"
                  @change="changeProvId"
                >
                  <a-select-option :value="item.code" v-for="(item, index) in provinceList" :key="index">{{
                    item.name
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="注册地址(市)" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select
                  ref="select"
                  placeholder="请选择注册地址(市)"
                  v-decorator.trim="[
                    'enterpriseUserMsgVO.regAreaId',
                    { rules: [{ required: true, message: '请选择注册地址(市)！' }] }
                  ]"
                  style="width: 100%"
                  @change="changeCityId"
                >
                  <a-select-option :value="item.code" v-for="(item, index) in regDistrictList" :key="index">{{
                    item.name
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="注册地址(区)" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select
                  ref="select"
                  placeholder="请选择注册地址(区)"
                  v-decorator.trim="[
                    'enterpriseUserMsgVO.regDistrictId',
                    { rules: [{ required: true, message: '请选择注册地址(区)！' }] }
                  ]"
                  style="width: 100%"
                >
                  <a-select-option :value="item.code" v-for="(item, index) in gareaList" :key="index">{{
                    item.name
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="详细地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input
                  placeholder="请输入详细地址"
                  v-decorator.trim="[
                    'enterpriseUserMsgVO.regDetail',
                    { rules: [{ required: true, message: '请输入详细地址！' }] }
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="法人姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input
                  placeholder="请输入法人姓名"
                  v-decorator.trim="[
                    'enterpriseUserMsgVO.legalName',
                    { rules: [{ required: true, message: '请输入法人姓名！' }] }
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="法人证件类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select
                  ref="select"
                  placeholder="请选择法人证件类型"
                  v-decorator.trim="[
                    'enterpriseUserMsgVO.legalCertType',
                    { rules: [{ required: true, message: '请选择法人证件类型！' }] }
                  ]"
                  style="width: 100%"
                >
                  <a-select-option :value="item.code" v-for="(item, index) in typeCodeList" :key="index">{{
                    item.type
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="法人证件号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input
                  placeholder="请输入法人证件号码"
                  v-decorator.trim="[
                    'enterpriseUserMsgVO.legalCertNo',
                    { rules: [{ required: true, message: '请输入法人证件号码！' }] }
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="法人证件有效期类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select
                  ref="select"
                  placeholder="请选择证件有效期类型"
                  v-decorator.trim="[
                    'enterpriseUserMsgVO.legalCertValidityType',
                    { rules: [{ required: true, message: '请选择证件有效期类型！' }] }
                  ]"
                  style="width: 100%"
                >
                  <a-select-option value="1">长期有效</a-select-option>
                  <a-select-option value="0">非长期有效</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="法人证件有效开始日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-date-picker
                  placeholder="法人证件有效期开始日期"
                  style="width: 100%"
                  v-decorator="[
                    'enterpriseUserMsgVO.legalCertBeginDate',
                    { rules: [{ required: true, message: '请选择法人证件有效期开始日期！' }] }
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="法人证件有效截止日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-date-picker
                  placeholder="法人证件有效期截止日期(非长期有效时必填)"
                  style="width: 100%"
                  v-decorator="[
                    'enterpriseUserMsgVO.legalCertEndDate',
                    { rules: [{ required: false, message: '请选择法人证件有效期截止日期！' }] }
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="联系人姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input
                  placeholder="请输入联系人姓名"
                  v-decorator.trim="[
                    'enterpriseUserMsgVO.contactName',
                    { rules: [{ required: true, message: '请输入联系人姓名！' }] }
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="联系人手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input
                  placeholder="请输入联系人手机号"
                  v-decorator.trim="[
                    'enterpriseUserMsgVO.contactMobile',
                    { rules: [{ required: true, message: '请输入联系人手机号！' }] }
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="手续费" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input-number
                  placeholder="请输入手续费"
                  :min="0"
                  :max="10"
                  :step="0.001"
                  style="width: 100%"
                  v-decorator.trim="[
                    'enterpriseUserMsgVO.commission',
                    { rules: [{ required: true, message: '请输入手续费！' }] }
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="卡类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select
                  ref="select"
                  placeholder="请选择卡类型"
                  v-decorator.trim="[
                    'userBusinessSettleMsgVO.cardType',
                    { rules: [{ required: true, message: '请选择卡类型！' }] }
                  ]"
                  style="width: 100%"
                >
                  <a-select-option value="0">对公</a-select-option>
                  <a-select-option value="1">对私</a-select-option>
                  <a-select-option value="2">对私非法人</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="卡户名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input
                  placeholder="请输入卡户名"
                  v-decorator.trim="[
                    'userBusinessSettleMsgVO.cardName',
                    { rules: [{ required: true, message: '请输入卡户名！' }] }
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="卡号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input
                  placeholder="请输入卡号"
                  v-decorator.trim="[
                    'userBusinessSettleMsgVO.cardNo',
                    { rules: [{ required: true, message: '请输入卡号！' }] }
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="银行所在省" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select
                  ref="select"
                  placeholder="请选择银行所在省"
                  v-decorator.trim="[
                    'userBusinessSettleMsgVO.provId',
                    { rules: [{ required: true, message: '请选择银行所在省！' }] }
                  ]"
                  style="width: 100%"
                  @change="changeProvId2"
                >
                  <a-select-option :value="item.code" v-for="(item, index) in provinceList" :key="index">{{
                    item.name
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="银行所在市" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select
                  ref="select"
                  placeholder="请选择银行所在市"
                  v-decorator.trim="[
                    'userBusinessSettleMsgVO.areaId',
                    { rules: [{ required: true, message: '请选择银行所在市！' }] }
                  ]"
                  style="width: 100%"
                >
                  <a-select-option :value="item.code" v-for="(item, index) in regDistrictList2" :key="index">{{
                    item.name
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="银行号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input
                  placeholder="请输入银行号(对公必填)"
                  v-decorator.trim="[
                    'userBusinessSettleMsgVO.bankCode',
                    { rules: [{ required: false, message: '请输入银行号！' }] }
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="支行名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input
                  placeholder="请输入支行名称(对公必填)"
                  v-decorator.trim="[
                    'userBusinessSettleMsgVO.branchName',
                    { rules: [{ required: false, message: '请输入支行名称！' }] }
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="持卡人证件类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select
                  ref="select"
                  placeholder="请选择法人证件类型(对私必填)"
                  v-decorator.trim="[
                    'userBusinessSettleMsgVO.certType',
                    { rules: [{ required: false, message: '请选择法人证件类型！' }] }
                  ]"
                  style="width: 100%"
                >
                  <a-select-option :value="item.code" v-for="(item, index) in typeCodeList" :key="index">{{
                    item.type
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="持卡人证件号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input
                  placeholder="请输入持卡人证件号码(对私必填)"
                  v-decorator.trim="[
                    'userBusinessSettleMsgVO.certNo',
                    { rules: [{ required: false, message: '请输入持卡人证件号码！' }] }
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="持卡人有效期类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-select
                  ref="select"
                  placeholder="请选择证照有效期类型(对私必填)"
                  v-decorator.trim="[
                    'userBusinessSettleMsgVO.certValidityType',
                    { rules: [{ required: false, message: '请选择证照有效期类型！' }] }
                  ]"
                  style="width: 100%"
                >
                  <a-select-option value="1">长期有效</a-select-option>
                  <a-select-option value="0">非长期有效</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="持卡人证件起始日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-date-picker
                  placeholder="持卡人证件起始日期(对私必填)"
                  style="width: 100%"
                  v-decorator="[
                    'userBusinessSettleMsgVO.certBeginDate',
                    { rules: [{ required: false, message: '请选择持卡人证件起始日期！' }] }
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item label="持卡人证件截止日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-date-picker
                  placeholder="截止日期(对私且类型为非长期有效必填)"
                  style="width: 100%"
                  v-decorator="[
                    'userBusinessSettleMsgVO.certEndDate',
                    { rules: [{ required: false, message: '请选择持卡人证件截止日期！' }] }
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { sysTenantAdd } from '@/api/modular/system/roleManage'
import {
  SysMenuTreeForGrant,
  getProvinceCode,
  getCityCode,
  getAreaCode,
  getDocumentTypeCode
} from '@/api/modular/system/menuManage'
import moment from 'moment'
export default {
  data() {
    return {
      typeCodeList: [],
      regDistrictList: [],
      regDistrictList2: [],
      provinceList: [],
      gareaList: [],
      infoData: {
        isSettleIn: false,
        provinceId: '',
        provId: ''
      },
      checkedKeys: [
        '1264622039642255361',
        '1655879830976532481',
        '1660847435357589506',
        '1660848090549817346',
        '1654069377178345473',
        '1654435823817400322',
        '1660586178343858178'
      ],
      autoExpandParent: true,
      expandedKeys: [],
      menuTreeData: [],
      selectedKeys: [],
      replaceFields: {
        key: 'id'
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 9 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this)
    }
  },
  methods: {
    // 初始化方法
    add() {
      this.visible = true
      this.roleMenu()
    },
    // 初始化方法
    roleMenu() {
      this.formLoading = this.visible = true
      this.getMenuTree()
      this.getProvinceCode()
      this.getDocumentTypeCode()
    },
    getDocumentTypeCode(e) {
      getDocumentTypeCode().then(res => {
        if (res.success) {
          this.typeCodeList = res.data
        }
      })
    },
    changeProvId2(e) {
      // 根据code去找id
      this.provinceList.find(item => {
        if (item.code == e) {
          this.infoData.provId = item.id
          this.getCityCode2(this.infoData.provId)
        }
      })
    },
    getCityCode2(provId) {
      getCityCode({
        provinceId: provId
      }).then(res => {
        if (res.success) {
          this.regDistrictList2 = res.data
        }
      })
    },
    changeProvId(e) {
      // 根据code去找id
      this.provinceList.find(item => {
        if (item.code == e) {
          this.infoData.provinceId = item.id
          this.getCityCode(this.infoData.provinceId)
        }
      })
    },
    changeCityId(e) {
      // 根据code去找id
      this.regDistrictList.find(item => {
        if (item.code == e) {
          this.infoData.cityId = item.id
          this.getAreaCode(this.infoData.cityId)
        }
      })
    },
    getProvinceCode() {
      getProvinceCode().then(res => {
        if (res.success) {
          this.provinceList = res.data
        }
      })
    },
    getCityCode(provinceId) {
      getCityCode({
        provinceId: provinceId
      }).then(res => {
        if (res.success) {
          this.regDistrictList = res.data
        }
      })
    },

    getAreaCode(cityId) {
      getAreaCode({
        cityId: cityId
      }).then(res => {
        if (res.success) {
          this.gareaList = res.data
        }
      })
    },
    /**
     * 获取菜单列表
     */
    getMenuTree() {
      SysMenuTreeForGrant().then(res => {
        if (res.success) {
          this.menuTreeData = res.data
          // 默认展开目录级
          this.menuTreeData.forEach(item => {
            this.expandedKeys.push(item.id)
          })
        }
      })
    },

    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onSelect(selectedKeys, info) {
      this.selectedKeys = selectedKeys
    },
    treeCheck(checkKeys) {},
    handleSubmit() {
      const {
        form: { validateFields }
      } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          values.expireTime = moment(values.expireTime).format('YYYY-MM-DD HH:mm:ss')
          values.isSettleIn = this.infoData.isSettleIn
          if (values.isSettleIn) {
            values.enterpriseUserMsgVO.licenseBeginDate = moment(values.enterpriseUserMsgVO.licenseBeginDate).format(
              'YYYYMMDD'
            )
            values.enterpriseUserMsgVO.licenseEndDate = moment(values.enterpriseUserMsgVO.licenseEndDate).format(
              'YYYYMMDD'
            )
            values.enterpriseUserMsgVO.legalCertBeginDate = moment(
              values.enterpriseUserMsgVO.legalCertBeginDate
            ).format('YYYYMMDD')
            values.enterpriseUserMsgVO.legalCertEndDate = moment(values.enterpriseUserMsgVO.legalCertEndDate).format(
              'YYYYMMDD'
            )
            values.userBusinessSettleMsgVO.certBeginDate = moment(values.userBusinessSettleMsgVO.certBeginDate).format(
              'YYYYMMDD'
            )
            values.userBusinessSettleMsgVO.certEndDate = moment(values.userBusinessSettleMsgVO.certEndDate).format(
              'YYYYMMDD'
            )
          }
          // values.grantMenuIdList =  this.checkedKeys
          sysTenantAdd(values)
            .then(res => {
              if (res.success) {
                this.$message.success(res.message)
                this.visible = false
                this.confirmLoading = false
                this.$emit('ok', values)
                this.form.resetFields()
              } else {
                this.$message.error('新增失败：' + res.message)
              }
            })
            .finally(res => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      this.form.resetFields()
      // this.checkedKeys = []
      this.visible = false
    }
  }
}
</script>
